<!--轮播图上面的导航内部的子菜单的详情-->
<template>
  <div class="navContent">
    <div class="content-left">
      <div class="contentchange">
        <ul>
          <li
            v-for="(items, index) in children"
            :key="items.id"
            @mouseenter="showDetails(items, index)"
            @mouseleave="hideDetails(items, index)"
          >
            <span>{{ items.name }}</span>
            <div class="titleBox">
              <a
              @click="jumpDetails(items,i.id,index)"
                v-for="(i,index) in items.children"
                :key="i.id"
                v-cloak
              >{{i.name}}</a>
            </div>
          </li>
        </ul>
      </div>
      <div class="content-right">
        <div class="w238">
          <p class="text-title">若找不到采购的产品或产品型号，请点击“发布求购”,发布采购需求或联系客服。</p>
          <div class="btn" @click="jumpoffer">发布求购--></div>
          <div class="line"></div>
          <div class="Consultation">客服咨询</div>
          <p class="suiyi">如有其他问题，可点击右下方”联系客服“，进行在线咨询。</p>
          <p class="suiyi julitop">客服在线时间：</p>
          <p class="suiyi">周一到周五</p>
          <p class="suiyi">08:00—12:00am 14:00—17:00pm</p>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
import image from "../../../assets/images/picsss.png";
export default {
  name: "BannerNavContent",
  props: {
    title: String,
    children: Array
  },

  data() {
    return {
      isShowArr: [],
      bottompic: image,
      timer: null
    };
  },
  mounted() {
    this.children.forEach(item => {
      this.isShowArr.push(false);
    });
  },
  methods: {
    // 鼠标移出事件
    hideDetails(item, index) {
      let timer = setTimeout(() => {
        clearTimeout(timer);
        this.$set(this.isShowArr, index, false);
      }, 300);
      clearTimeout(this.timer);
    },

    // 鼠标进入事件
    showDetails(item, index) {
      this.timer = setTimeout(() => {
        this.childrenShowInfo = item.children;
        this.$set(this.isShowArr, index, true);
      }, 300);
    },

    jumpDetails(item,id,index) {
      console.log(item,id,index,item.name,item.children[index].name)
      this.$store.commit('godetailname' ,item.name,)
      this.$store.commit('godetailname2',item.children[index].name,)
      this.$router.push({
        name: "productList",
        params: {
          id: id,
          item
        }
      });
    },

    // 前往报价
    jumpoffer() {
      this.$router.push({
        name: "purchaseCenter",
        params: {
          sonshow: false
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.bounce-enter-active {
  animation: bounce-in 0.2s;
}
.bounce-leave-active {
  animation: bounce-in 0.2s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}

.navContent {
  display: flex;
  flex-direction: row;
  margin-left: -211px;
  .content-left {
    width: 100%;
    height: 335px;
    // background-color: red;
    display: flex;
    flex-direction: row;
    .contentchange {
      // width: 780px;
      height: 335px;
      overflow: auto;

      ul {
        li {
          width: 750px;
          display: flex;
          flex-direction: row;

          line-height: 33px;
          color: #4f4f4f;
          text-indent: 14px;
          font-size: 12px;
          font-weight: bold;
          cursor: pointer;
          span {
            width: 200px;
            color: #3699eb;
          }
          .titleBox {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 600px;
            a {
              display: inline-block;
              box-sizing: border-box;
              font-style: normal;
              color: #818781;
              font-weight: normal;
              line-height: 32px;
              border-bottom: 1px dashed #ececec;
              &:hover {
                transition: all 0.2s ease-out;
                color: #3699eb;
              }
            }
          }
        }
      }
    }
  }
  .content-right {
    // box-sizing: border-box;
    width: 210px;
    height: 335px;
    background: #f5f5f5;
    // background: red;

    padding: 0 6px;
    .w238 {
      // width: 238px;
      margin: auto;
      .text-title {
        color: #4b4b4b;
        font-size: 12px;
        margin-top: 10px;
        line-height: 22px;
        margin-bottom: 10px;
      }
      .btn {
        width: 110px;
        height: 36px;
        background: #ff7e00;
        color: #fff;
        line-height: 36px;
        text-align: center;
        font-size: 14px;
        margin-left: 3px;
        cursor: pointer;
        &:hover {
          background: #ffaa55;
          transition: all 0.3s;
          border-radius: 3px;
        }
      }
      .line {
        width: 100%;
        height: 24px;
        border-bottom: 1px #cccccc dashed;
      }
      .Consultation {
        margin-left: 3px;
        color: #4b4b4b;
        font-size: 14px;
        font-weight: 800;
        line-height: 18px;
        margin-top: 13px;
      }
      .suiyi {
        color: #7a7a7a;
        font-size: 12px;
        line-height: 20px;
        padding-left: 12px;
      }
      .julitop {
        margin-top: 10px;
      }
    }
  }
}
</style>
